<template>
    <div class="">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-message"></i>&nbsp;供应详情</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-form  label-width="160px">
                <el-form-item label="产品名称：">
                    <div>
                        {{data.product_name}}
                    </div>
                </el-form-item>
                <el-form-item label="封面图：">
                    <div>
                       <img :src="data.head_img" alt="" style="width:320px; height:160px;">
                    </div>
                </el-form-item>
                <el-form-item label="详情图：" style="overfolw:hidden">
                   <div v-for="item in  imgList" :key="item.value" class="img-box">
                        <img :src="item" alt="">
                   </div>
                </el-form-item>
                <el-form-item label="描述：">
                    <div>
                        {{data.description}}
                    </div>
                </el-form-item>
                <el-form-item label="供应价格：">
                    <div>
                        {{data.supply_price}}
                    </div>
                </el-form-item>
                 <el-form-item label="供应公司：">
                    <div>
                        {{data.company_info}}
                    </div>
                </el-form-item>
               
                <el-form-item label="联系人">
                    <div>
                        {{data.contact}}
                    </div>
                </el-form-item>
                <el-form-item label="联系电话：">
                    <div>
                        {{data.mobile}}
                    </div>
                </el-form-item>
                 <el-form-item label="创建时间：">
                    <div>
                        {{data.create_time}}
                    </div>
                </el-form-item>
                <el-form-item label="审核状态：">
                    <div>
                        {{data.is_checked}}
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="returnList">返回列表</el-button>
                </el-form-item>
            </el-form>
        </div>
       
    </div>
</template>
<script>
import {getSupplyList,postDeleteSupply,getSupplyDeatils,} from '@/api/supply'
export default {
    name:"supplyDetails",
    data() {
        return {
            id:'', //详情id
            data:'',//数据
            imgList:[],//图集
            title:'',//标题
            pageIndex:1,
            pageSize:10,
            keywords:[],//关键词数组
        }
    },
    //实例创建
    created(){
        if(this.$route.query.id &&this.$route.query.id!=""){
            this.id = this.$route.query.id;
            this.getData();
        }else{
           this.$notify.info({title: '提示',message: '获取详情ID失败，请返回列表页重试！'});
        }
    },
    //方法
    methods: {
        //获取详情
       getData(){
            getSupplyDeatils(this.id).then((response)=> {
                console.log(response);
                if(response.code==200){
                    this.data = response.data;//当前返回的数据
                    //修改审核状态
                    if(this.data.is_checked == 0){
                        this.data.is_checked = "审核中" ;   
                    }else if(this.data.is_checked == 1){
                        this.data.is_checked = "审核不通过"  ;   
                    }else if(this.data.is_checked == 2){
                        this.data.is_checked = "审核通过"  ;   
                    }
                    this.imgList = JSON.parse(response.data.banner_img);
                    // console.log(this.imgList);
                    // console.log(this.data);
                }else{
                    this.$notify.error({
                        title: '异常',
                        offset: 100,
                        message: response.msg
                    });
                }
            })
        },
        //返回列表
        returnList (){
          this.$router.go(-1);
        }
    }
}
</script>
<style lang="stylus" scoped>
    .el-form-item .el-cascader{
        width :400px;
    }
    .el-cascader-menus .el-cascader-menu{
        width :240px
    }
    .img-box{
        float :left;
        width :320px;
        height :160px;
        margin-right :20px;
        margin-bottom :20px;
        img {
            width :100%;
            height :100%;
        }
    }
</style>


